/**
 * WebsiteDialog
 */
/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  上传数据
 *
 * */
 var React = require("react");
 var CommonDialog = require("./CommonDialog");
 var tool = require("../../../utils/tool");
 var Validator = require("../../../utils/validator/Validator");
 var WebsiteDialog = React.createClass({
    mixins: [CommonDialog],
    getInitialProps: function (){
        return {
            data: ""
        }
    },
    getInitialState: function (){
        return {
            website: "",
            error: false,
            isInvalid: true
        }
    },
    componentWillMount: function (){
        var website = this.props.data;
        if (!website) return false;
        this.setState({
            website: website,
            isInvalid: !website.length
        });
    },
    checkValidate: function (){
        var validator = Validator();

        validator.addRule($(this.refs.url), [{
            validator: "empty",
            error: $._('Official website can not be empty')
        }, {
            validator: "url",
            error: $._("Official website error")
        }]);

        var errors = validator.execute();
        this.setState({
            error: !!errors
        });
        return !errors;
    },
    handleOnChangeUrl: function (e){
        var node = $(e.target), value = node.val();

        this.data = value;
        this.setState({
            website: this.data,
            isInvalid: !this.data.length,
            error: !this.data.length
        });
    },
    hanleOnSaveUrl: function (e){
        var node = $(e.target), value = node.val(), status = true;

        if (this.checkValidate()){
            this.data = tool.completionUrl(value);
            status = false;
        }

        this.setState({
            isInvalid: status
        });
    },
    handleOnSubmit: function (){
        if (this.checkValidate()){
            this.props.saveRecognizeProperty({
                website: this.data
            });
            this.handleOnCloseDialog();
        }
    },
    render: function (){
        var errorNode = '';
        if (this.state.error){
            errorNode = <div className='dialog-error-tip'>{$._('Official website error')}</div>
        }
        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form">
                    <div className="btg-modal-content">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>{$._('Add official website')}</label>
                            </div>
                            <div className="form-group">
                                <span>{$._('Web address')}</span>
                                <input ref="url" onChange={this.handleOnChangeUrl} onBlur={this.hanleOnSaveUrl} type="text" className="form-control" value={this.state.website} />
                                {errorNode}
                            </div>
                            <div className="form-group buttons">
                                <button disabled={this.state.isInvalid} onClick={this.handleOnSubmit} type="button">{$._("Confirm")}</button>
                            </div>
                        </div>
                    </div>
                    <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
                </dialog>
            </div>
        )
    }
 });

 module.exports = WebsiteDialog;
